<template>
    <footer class="bg-white pt-16 pb-8">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-5 gap-8 pb-12 border-b">
                <div>
                    <h3 class="font-bold mb-6">关于环地</h3>
                    <ul class="space-y-3 text-gray-600">
                        <li><a href="#" class="hover:text-primary">公司简介</a></li>
                        <li><a href="#" class="hover:text-primary">企业文化</a></li>
                        <li><a href="#" class="hover:text-primary">服务优势</a></li>
                        <li><a href="#" class="hover:text-primary">发展历程</a></li>
                        <li><a href="#" class="hover:text-primary">荣誉资质</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-bold mb-6">主营业务</h3>
                    <ul class="space-y-3 text-gray-600">
                        <li><a href="#" class="hover:text-primary">投资移民</a></li>
                        <li><a href="#" class="hover:text-primary">技术移民</a></li>
                        <li><a href="#" class="hover:text-primary">杰出人才</a></li>
                        <li><a href="#" class="hover:text-primary">海外置业</a></li>
                        <li><a href="#" class="hover:text-primary">海外教育</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-bold mb-6">热门项目</h3>
                    <ul class="space-y-3 text-gray-600">
                        <li><a href="#" class="hover:text-primary">迪拜自贸区</a></li>
                        <li><a href="#" class="hover:text-primary">新加坡创业</a></li>
                        <li><a href="#" class="hover:text-primary">马耳他国债</a></li>
                        <li><a href="#" class="hover:text-primary">加拿大萨省</a></li>
                        <li><a href="#" class="hover:text-primary">希腊置业</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-bold mb-6">联系我们</h3>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-center">
                            <i class="fas fa-phone-alt w-5 text-primary"></i>
                            <span>400-800-8888</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-envelope w-5 text-primary"></i>
                            <span>info@global.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-map-marker-alt w-5 text-primary"></i>
                            <span>上海市浦东新区陆家嘴环地金融中心</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-bold mb-6">关注我们</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="text-center">
                            <img src="./image/erweima.png" alt="微信二维码" class="w-24 h-24 mb-2" />
                            <span class="text-sm text-gray-600">微信公众号</span>
                        </div>
                        <div class="text-center">
                            <img src="./image/erweima.png" alt="小程序二维码" class="w-24 h-24 mb-2" />
                            <span class="text-sm text-gray-600">移民小程序</span>
                        </div>
                        <div class="text-center">
                            <img src="./image/erweima.png" alt="微信二维码" class="w-24 h-24 mb-2" />
                            <span class="text-sm text-gray-600">微信公众号</span>
                        </div>
                        <div class="text-center">
                            <img src="./image/erweima.png" alt="小程序二维码" class="w-24 h-24 mb-2" />
                            <span class="text-sm text-gray-600">移民小程序</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pt-8 text-center text-gray-500">
                <p>Copyright © 2024 环地移民. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
    <!-- 固定悬浮按钮 -->

    <div class="fixed right-0 top-1/2 transform -translate-y-1/2 bg-white shadow-lg rounded-l-lg z-50">
        <div class="space-y-4">
            <button class="w-12 h-12 flex items-center justify-center text-primary hover:text-primary-dark">
                <i class="fas fa-comments text-xl"></i>
            </button>
            <button class="w-12 h-12 flex items-center justify-center text-primary hover:text-primary-dark">
                <i class="fas fa-phone-alt text-xl"></i>
            </button>
            <button class="w-12 h-12 flex items-center justify-center text-primary hover:text-primary-dark">
                <i class="fas fa-qrcode text-xl"></i>
            </button>
        </div>
    </div>
    <el-backtop visibility-height="0">
        <button class="w-12 h-12 flex items-center justify-center text-primary hover:text-primary-dark">
            <i class="fas fa-arrow-up text-xl"></i>
        </button>
    </el-backtop>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>
